<template>
  <view class="page">
    <view class="page-top">
      <!-- <view class="my-title">
        <span class="my-title1">我的</span>
        <span class="my-title2">使用销售员工具的18天</span>
      </view> -->
      <view class="head">
        <image style="width: 80px; height: 80px; background-color: #eeeeee;border-radius:50%" :src="userInfo.avatarUrl"></image>
        <view class="head-text">
          <view class="head-title1">{{userInfo.nickName}}</view>
          <view class="head-title2">地点：{{userInfo.province}}{{userInfo.city}}</view>
        </view>
      </view>
    </view>
    <view class="cell" @tap="noModule">
      <view class="cell-hr">
        <image class="cell-hr-img" src="/static/article.png" alt="">
          <view class="cell-hr-text">账单</view>
      </view>
      <view class="cell-hr">
        <image class="cell-hr-img" src="/static/my.png" alt="">
          <view class="cell-hr-text">个人信息</view>
      </view>
      <!-- <view class="cell-hr">
        <img class="cell-hr-img" src="@/assets/my/video.png" alt="">
        <view class="cell-hr-text">图库</view>
      </view>
      <view class="cell-hr">
        <img class="cell-hr-img" src="@/assets/my/rank.png" alt="">
        <view class="cell-hr-text">排名</view>
      </view>
      <view class="cell-hr">
        <img class="cell-hr-img" src="@/assets/my/level.png" alt="">
        <view class="cell-hr-text">等级</view>
      </view> -->
    </view>
    <view class="nav">
      <view class="nav-left">
        <uni-icons type="phone-filled" size="20" color="#5E8AF1" />
        <span>{{userInfo.phone||'暂未绑定电话'}}</span>
      </view>
    </view>
    <view class="nav">
      <view class="nav-left">
        <uni-icons type="smallcircle" size="20" color="#5E8AF1" />
        <span>{{userInfo.jobType}}</span>
      </view>
    </view>
    <view class="nav" @tap="noModule">
      <view class="nav-left">
        <uni-icons type="flag-filled" size="20" color="#5E8AF1" />
        <span>协议</span>
      </view>
      <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
    </view>
    <!-- <navigator url="/pages/my/set" open-type="navigate" class="nav" hover-class="none">
      <view class="nav-left">
        <uni-icons type="gear-filled" size="20" color="#5E8AF1" />
        <span>设置</span>
      </view>
      <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
    </navigator> -->
  </view>

</template>
<script >
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters('user', {
      userInfo: 'getuserinfo'
    })
  },
  methods: {
    noModule() {
      uni.showModal({
        title: '提示',
        content: '功能暫未开放',
        showCancel: false,
        success: function () {
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  // background: #2d3552;
  min-height: 100vh;
  &-top {
    background: linear-gradient(
      rgba($color: #ed7467, $alpha: 1),
      rgba($color: #ed7467, $alpha: 0.7)
    );
    padding: 0 0 20px 0;
    border-radius: 200px/15px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
.my {
  &-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px 20px;
  }
  &-title1 {
    font-size: 20px;
    color: #fff;
  }
  &-title2 {
    color: #f0e9e9;
  }
}
.head {
  display: flex;
  align-items: center;
  padding: 20px 20px;
  &-text {
    padding-left: 20px;
  }
  &-title1 {
    font-size: 18px;
    padding: 10px 0;
    color: #e7f2fc;
    text-align: left;
  }
  &-title2 {
    color: #f0e9e9;
    text-align: left;
  }
}
.cell {
  padding: 20px 0;
  display: flex;
  &-hr {
    width: 25%;
    text-align: center;
    &-img {
      width: 50px;
      height: 50px;
      -webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent
            80%, rgba(0, 0, 0, 0.8));
    }
    &-text {
      color: #2b2a2a;
      text-align: center;
      padding-top: 5px;
    }
  }
}
.nav:last-child {
  border-bottom: 1px solid #f2f2f2;
}
.nav {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f2f2f2;
  &-left {
    display: flex;
    align-items: center;
    span {
      padding-left: 10px;
      color: #808080;
    }
  }
}
</style>

